<template>
    <el-table :data="tableData" style="max-width: calc(100vw - 280px);">
        <el-table-column fixed prop="name" label="name" width="150" />
        <el-table-column label="headImage">
            <template #default="scope">
                <img style="width: 50px;height: 50px;border-radius: 50%;" :src="scope.row.headImage" alt="">
            </template>
        </el-table-column>
        <el-table-column label="sex">
            <template #default="scope">
                <span>{{ scope.row.sex === 1 ? 'Male' : 'Female' }}</span>
            </template>
        </el-table-column>
        <el-table-column prop="height" label="height" />
        <el-table-column prop="bwh" label="bwh" />
        <el-table-column prop="hair" label="hair" />
        <el-table-column prop="eyes" label="eyes" />
        <el-table-column prop="shoes" label="shoes" />
        <el-table-column fixed="right" label="operate" min-width="120">
            <template #default="scope">
                <el-button v-if="scope.$index !== 0" @click="upIndex(scope.$index)" link type="primary" :icon="ArrowUp">
                    Move up
                </el-button>
                <el-button v-if="scope.$index !== tableData.length - 1" @click="downIndex(scope.$index)" link
                    type="primary" :icon="ArrowDown">Move down</el-button>
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { changeOrderAPI, searchAllModelAPI } from '@/apis/admin';
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';

// 定义表格数据
const tableData = ref([
    {
        "id": 1,
        "name": "YAROSLAV",
        "headImage": "无",
        "sex": 1,
        "height": "180CM",
        "bwh": "90-66-92",
        "hair": "Black",
        "eyes": "Brown",
        "shoes": "42"
    },
    {
        "id": 2,
        "name": "WIWI",
        "headImage": "无",
        "sex": 1,
        "height": "185CM",
        "bwh": "90-70-95",
        "hair": "Brown",
        "eyes": "Blue",
        "shoes": "44"
    },
    {
        "id": 2,
        "name": "WIWI",
        "headImage": "无",
        "sex": 1,
        "height": "185CM",
        "bwh": "90-70-95",
        "hair": "Brown",
        "eyes": "Blue",
        "shoes": "44"
    }
]);

const getData = async () => {
    const res = await searchAllModelAPI();

    if (res.data.code === 200) {
        tableData.value = res.data.data

        tableData.value=tableData.value.sort((a,b)=>{
            return a.arrange - b.arrange
        })
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

onMounted(()=>{
    getData()
})

const upIndex = async (index) => {
    const res = await changeOrderAPI([tableData.value[index - 1], tableData.value[index]])

    if (res.data.code === 200) {
        ElMessage.success('The modification was successful')

        getData()
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

const downIndex = async (index) => {
    const res = await changeOrderAPI([tableData.value[index], tableData.value[index + 1]])

    if (res.data.code === 200) {
        ElMessage.success('The modification was successful')

        getData()
    }
    else {
        ElMessage.error(res.data.msg)
    }
}

</script>